.flex {
  display: flex;
}

.space_between {
  justify-content: space-between;
}

.justify_center {
  justify-content: center;
}

.align_center {
  align-items: center;
}

.f_wrap {
  flex-wrap: wrap;
}

.vip {
  color: #fff;
  padding-bottom: 10px;

  .vip-top {
    position: relative;
    height: 190px;
    // margin-top: 6px;
  }
  .vip_top_disabled {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }

  :deep(.nut-swiper) {
    .nut-swiper-inner {
      height: 190px !important;
    }
  }

  .swiper_item_list {
    position: absolute;
    bottom: 33px;
    font-size: 2.5vw;
    width: 321px;
    height: 80px;
    transform: translate(27px, 14px);

    .swiper_item_top {
      .item_top_rule {
        width: 94px;
        height: 22px;
        background-size: 100%;
        background-repeat: no-repeat;
        //transform: scale(.87);
        padding-left: 4px;
        padding-bottom: 2px;

        .icon_wh {
          width: 12px;
          height: 12px;
          margin-right: 4px;
          background: url(/imgs/vip/question.webp) center no-repeat;
          background-size: 100%;
        }

        .rule_txt {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .item-top-num {
        margin-top: 2px;
      }
    }

    .item_pro {
      margin: 3px 0 0;
      position: relative;
      flex: auto;
      width: 323px;
      height: 11px;
      background-size: 100%;
      background-repeat: no-repeat;
      //border-radius: 20px;
      //box-shadow: inset 0 0 4px 0 #000;
      //background-blend-mode: color-burn, overlay, normal;
      //background: url(/imgs/level/level_pro_jd.webp) center no-repeat;

      .pro_inner {
        max-width: 98.6%;
        display: inline-block;
        height: 6px;
        position: absolute;
        left: 0.7%;
        top: 2px;
        border-radius: 12px;
        box-shadow: inset 0 0 8px 0 #fff;
        border-style: solid;
        border-width: 1px;
        background: linear-gradient(90deg, #fa7800 0%, #fbca37 100%);
      }
    }

    .swiper_item_bottom {
      height: 30px;
      margin-top: 2px;

      .bottom_l {
        font-size: 10px;
        width: 225px;
        height: 31px;
        background-size: 100%;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;

        .bottom_l-l {
          padding-left: 3px;

          .icon_jl {
            width: 22px;
            height: 22px;
            margin-right: 3px;
            background: url(/imgs/vip/gold.webp) center no-repeat;
            background-size: 100%;
          }

          .c-txt {
            font-size: 14px;
            color: #ffd56d;
            display: flex;
            align-items: center;
            margin-left: 2px;
            font-weight: bold;
            white-space: nowrap;
          }
        }

        .bottom_l_r {
          min-width: 45px;
          line-height: 10px;

          .icon_xmjl {
            width: 20px;
            height: 20px;
            background: url(/imgs/vip/vip_icon_jilv.webp) center no-repeat;
            background-size: 100%;
          }

          .jl_txt {
            width: max-content;
            margin: 0 8px 0 4px;
            white-space: wrap;
          }
        }

        .bottom_l_r_vn {
          min-width: 60px;
        }
      }

      .bottom_r {
        width: 88px;
        height: 28px;
        
        span {
          width: 225px;
          flex: 1;
        }

        .lq_btn {
          flex: none;
          width: 100px;
        }
        color: #FFF;
        font-size: 12px;
        font-weight: 500;
        background-size: 100%;
      }
    }
  }

  .swiper_click_btn {
    width: 321px;
    position: absolute;
    z-index: 8;
    left: 50%;
    //bottom: 58px;
    bottom: 7px;
    transform: translateX(-50%);

    .click_rule {
      width: 90px;
      height: 20px;
      margin-bottom: 35px;
    }

    .click_bottom {
      height: 28px;
      width: 100%;
      span {
        flex: 1;
      }

      .lq_btn {
        flex: none;
        width: 100px;
      }
    }
  }

  .swiper_btns {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
  }

  .vip_point {
    position: absolute;
    z-index: 9;
    top: 25px;
    width: 100%;
    height: calc(100% - 32px);
    // border: 1px solid rgba(255, 0, 0, 1);
  }

  .swiper_btn {
    border-radius: 0 5px 5px 0;
    border: 1px solid rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 42px;
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    box-shadow: 0.5px 0.5px 0 0 rgba(255, 255, 255, 0.5);
    background-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 120px;
    z-index: 9;

    .icon {
      width: 10px;
      height: 12px;
      background: url(/imgs/vip/icon_jt.webp) center no-repeat;
      background-size: 100%;
    }

    &.swiper_btn_l {
      border-left: 0;
      left: 0;
    }

    &.swiper_btn_r {
      border-radius: 5px 0 0 5px;
      border-right: 0;
      right: 0;

      .icon {
        transform: rotate(180deg);
      }
    }
  }

  .vip_t_txt_all {
    position: absolute;
    top: 227px;
    left: 0;
    width: 100%;

    :deep(.nut-swiper) {
      .nut-swiper-inner {
        height: 50px !important;

        img {
          width: 100%;
        }
      }
    }

    .tag_bg {
      position: absolute;
    }

    .vip_t_bg {
      margin-top: 6px;
      height: 24px;
      //background: url(/imgs/vip/vip_txt_bg.webp) center no-repeat;
      background-size: 100% 100%;
    }

    .vip_t_txt {
      position: absolute;
      z-index: 9;
      width: 100%;
      height: 50px;
      top: 0;
      padding-top: 20px;

      span {
        flex: 1;
        text-align: center;
        font-size: 12px;

        &:first-child,
        &:nth-child(5) {
          color: #4d4d61;
        }

        &:nth-child(2),
        &:nth-child(4) {
          color: #7e7f98;
        }

        &.vip_current {
          position: relative;
          font-size: 16px;
          font-weight: bold;
          background: -webkit-linear-gradient(45deg, #c4b8ff, #ffc8b6);
          /* Chrome, Safari */
          background: linear-gradient(45deg, #c4b8ff, #ffc8b6);
          /* 标准语法 */
          -webkit-background-clip: text;
          /* Chrome, Safari */
          background-clip: text;
          -webkit-text-fill-color: transparent;
          /* Chrome, Safari */
          color: transparent;

          /* 其他浏览器 */
          img {
            position: absolute;
            width: 36px;
            height: 11px;
            z-index: 11;
            left: 20px;
            bottom: 8px;
          }
        }
      }
    }
  }

  .swiper_vip_img {
    height: calc(100% - 8px);
    width: 92%;
    margin-left: 4%
  }

  .vip-content {
    position: relative;
    border-radius: 8px;
    margin: 44px auto 24px;
    width: 347px;
    background: #131232;
    box-shadow: 0.5px 0.5px 1px 0px #2e296b inset;

    .vip_c_top {
      position: absolute;
      z-index: 9;
      font-size: 14px;
      padding: 0 14px;
      width: 100%;
      height: 40px;
      background: url(/imgs/vip/list_top.png) center no-repeat;
      background-size: 100%;
      border-radius: 8px 8px 0 0;

      .c_top_r {
        color: #C6C4F5;
        font-family: "PingFang SC";
        font-size: 14px;
        font-weight: 500;
        line-height: 14px; /* 100% */

        .icon {
          width: 14px;
          height: 14px;
          margin-left: 4px;
          background: url(/imgs/vip/icon_wh.webp) center no-repeat;
          background-size: 100%;
        }
      }
    }

    .level_list_sec {
      padding: 40px 14px 14px;
      border-radius: 8px;
      position: relative;
      // height: calc(var(--vh) * 100 - 300px);
      // overflow-y: auto;

      &.level_list_sec {
        overflow: hidden;
      }

      &::-webkit-scrollbar {
        width: 4px;
      }

      &::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 2px;
      }

      .vip_top_disabled2 {
        position: absolute;
        width: 100%;
        height: 100%;
        // height: calc(var(--vh) * 100 - 200px);
        left: 0;
        top: 0;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 4;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
      }

      .list_item {
        .list_item_l {
          font-size: 14px;
          margin-bottom: 10px;
          margin-top: 10px;
          gap: 8px;

          .icon_xx {
            width: 12px;
            height: 12px;
            background: url(/imgs/vip/icon_xx.png) center no-repeat;
            background-size: 100%;
          }
        }

        .list_item_r {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 11px;

          .list_item_r_item {
            position: relative;
            font-size: 2.8vw;
            width: 154px;
            height: 68px;
            margin-bottom: -2px;
            padding: 9px 12px;
            background: linear-gradient(180deg, #26254b 0%, #1d1c3c 100%),
              linear-gradient(322.22deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.03) 22.43%,
                rgba(255, 255, 255, 0) 23.35%,
                rgba(255, 255, 255, 0) 31.64%,
                rgba(255, 255, 255, 0) 51.16%,
                rgba(255, 255, 255, 0) 67.46%),
              linear-gradient(137.86deg,
                rgba(255, 255, 255, 0.01) 0%,
                rgba(255, 255, 255, 0.03) 16.45%,
                rgba(255, 255, 255, 0) 16.84%,
                rgba(255, 255, 255, 0) 55.07%) !important;
            background-size: 100% 100%;
            box-shadow: 0.5px 0.5px 1px 0px rgba(68, 67, 118, 1) inset;
            border-radius: 8px;

            &::after {
              position: absolute;
              display: block;
              content: "";
              width: 20px;
              height: 20px;
              background: url(/imgs/vip/icon_list_top.png) center no-repeat;
              background-size: 100%;
              top: -5px;
              right: -5px;
            }

            &::before {
              position: absolute;
              display: block;
              content: "";
              width: 100%;
              height: 100%;
              background: url(/imgs/vip/Vector.png) center no-repeat;
              background-size: 100% 100%;
              top: 0;
              left: 0;
            }

            .list_item_bg {
              .item_l_txt {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                gap: 8px;

                p {
                  // margin-top: 15px;
                  // height: 32px;
                  font-size: 14px;
                  line-height: 14px;
                }

                .vip_rate {
                  width: 62px;
                  height: 22px;
                  // background: url(/imgs/vip/rate_bg.webp) center no-repeat;
                  // background-size: 100%;
                  background: radial-gradient(100% 101.89% at 50% 0%,
                      #393866 0%,
                      #212042 55.13%,
                      #272647 99.75%);
                  border: 1px solid rgba(61, 59, 107, 1);
                  border-radius: 4px;

                  :deep(.nut-price--small) {
                    font-size: 0.6rem;
                  }
                }
              }

              .item_img {
                width: 61px;
                height: 51px;
                margin-top: -4px;

                img {
                  width: 100%;
                }

                &.img_level_live {
                  img {
                    width: 94%;
                  }
                }

                &.img_level_game {
                  img {
                    width: 86%;
                  }
                }

                &.img_level_sport {
                  img {
                    width: 89%;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

// 规则
.popup_body {
  color: #fff;

  .form_card {
    padding: 24px 20px;
    color: #fff;
    font-size: 14px;
    line-height: 20px;
  }

  .btn-content {
    margin: 0 auto 25px;
  }
}

:deep(.submit) {
  width: 307px;
}